<template>
    <el-card>
        <div class="tools-header">
            <div>
                <span>
                    {{typeName}}
                    <span class="num"> {{num}} </span>
                    条 &nbsp;
                </span>

                <el-link 
                v-if="isLogin && num == 0" 
                @click="toBuy"
                >
                    去购买
                </el-link>

                <el-link 
                v-if="!isLogin" 
                @click="showLogin"
                >
                    去登录
                </el-link>
            </div>

            <slot name="btn"></slot>
        </div>

        <dialog-product 
            v-model="dialogVisible" 
            @close="close" 
            @success="close" 
            projectids="4"
        ></dialog-product>
    </el-card>
</template>

<script>
import dialogProduct from '../../user/center/components/dialog-product.vue';

import { mapActions } from 'vuex';

export default {
    head: {},
    components: {
        dialogProduct,
    },
    props: {
        typeName: {
            type: String,
            default: '',
        },
        num: {
            type: [String, Number],
            default: 0,
        },
        isLogin:{
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            dialogVisible: false,
        };
    },
    methods: {
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
        toBuy() {
            this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
                login:()=>{
                    this.dialogVisible = true;
                },
                noLogin: () =>{
                    this.showLogin(() => {
                        this.dialogVisible = true;
                    });
                },
            });
        },
        close() {
            this.$emit('close');
        },
    },
    created() {},
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-link {
        color: $primaryColor;
    }
    .num {
        font-size: 16px;
        color: red;
    }
}
</style>
